<template>
	<ul class="list">
		<!-- v-for='(item,key) of cities' -->
		<li class="item" 
			v-for='item of letters'
			:key='item' 
			:ref='item'
			@touchstart='touchStart'
			@touchmove='touchMove'
			@touchend='touchEnd'
			@click='letterClick'
		>
			{{ item }}
		</li>
	</ul>
</template>

<script>
	
	export default{
		name: "CityAlphabet",
		data (){
			return {
				touchStatus: false,
				startY: 0,
				timer: null
			}
		},
		computed: {
			letters (){
				const letters = []
				for ( let i in this.cities) {
					letters.push(i)
				}
				return letters
			}
		},
		updated (){
			this.startY = this.$refs['A'][0].offsetTop
		},
		props: {
			cities: Object
		},
		methods: {
			letterClick (e){
				this.$emit("change",e.target.innerText)
				console.log(e.target.innerText)
			},
			touchStart (e){
				this.touchStatus = true
			},
			touchMove (e){
				if( this.touchStatus){
					if( this.timer ){
						clearTimeout( this.timer )
					}
					this.timer = setTimeout(()  =>{
						// const startY = this.$refs['A'][0].offsetTop
						const touchY = e.touches[0].clientY - 79
						const index =Math.floor(( touchY - this.startY ) /20)
						console.log(index)
						if( index >= 0  && index < this.letters.length ) {
							this.$emit("change",this.letters[index])
						}
					},16)
					
					
				}
			},
			touchEnd (e){
				this.touchStatus = false
			}

		}
	}
</script>

<style lang='stylus' scoped>
	@import '~styles/varilbes.styl'
	.list 
		display flex
		flex-direction column
		justify-content center
		position absolute
		top 1.58rem
		right 0
		bottom 0
		width .4rem
		.item
			line-height .4rem
			text-align center
			color $bgColor
</style>